<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <div id="app">
    <div >
       <h1 id="mymsg">{{msg}}</h1>
        <h1>{{myname}}</h1>
       <button @click="changeName">改变名字</button>
    </div>
  </div>
  <hr>

  <button  onclick="toDel()">销毁当前的实例</button>
   <script src="./vue.js"></script>
   <script>
    // 面试题：vue生命周期有哪些 
        //  beforeCreate 实例创建前 created* 实例创建后
        //  beforeMount 实例挂载前  mounted* 实例挂载后
        //  beforeUpdate 实例更新前 updated* 实例更新后
        //  beforeDestroy 实例销毁前 destroyed* 实例销毁后 




    //面试题： vue 一进入组件触发哪些生命周期函数?
      // beforeCreate 实例创建前  created实例创建后
      // beforeMount 实例挂载前  mounted实例挂载后 
       let vm=new Vue({
        el:"#app",
        data(){
          return {
            msg:"使用了数据",
            myname:"张三",
         
          }
        },
        methods:{
          say(){
            console.log("调用了函数")
          },
          changeName(){
            this.myname="李四"
          }
        },
        beforeCreate(){ //vue实例的创建前
          // 创建前的生命周期 data,methods等都未准备
          // 无法操作dom
          // 应用场景 ：
            // console.log(this.msg) //undefined
            // this.say(); //报错
             console.log("vue实例创建前")
        },
        created(){ //vue实例的创建后
            // 创建后的生命周期 data,methods 准备就绪可以操作
            // 无法操作dom
            // 应用场景 ： 进入页面就调用接口 放到created中调用
             console.log(this.msg)
            this.say();
            console.log("vue实例创建后")
        },
        beforeMount(){ //vue 实例的挂载前
           //vue实例的挂载前 的生命周期 data,methods 准备就绪可以操作
           
          console.log("vue实例挂载前")
          // 无法操作dom
           document.getElementById("mymsg").innerHTML="最新消息"
        },
        mounted() { //vue 实例挂载后 ---组件渲染完成
          //  vue实例挂载后， 可以操作data和methods
          // 可以操作dom  
          // 应用场景： 调用接口 后操作dom  初始化一些插件
           console.log("vue实例挂载后")
          document.getElementById("mymsg").innerHTML="最新消息"
        },
        beforeUpdate(){ // vue实例更新前
          // vue data数据改变了 并且 渲染dom内容改变了
          console.log("vue实例更新前")
        },
        updated(){ // vue实例更新后
          // vue data数据改变了 并且 渲染dom内容改变了
          // 根据变化后的数据 去隐藏视图，去调用接口
          console.log("vue实例更新后")
        },
        beforeDestroy() { //vue实例的销毁前
          // 跳转其他页面了 触发销毁前
          // 应用场景：给其他页面传参，
          // 关闭定时器， 销毁一些全局事件如scroll resize
           console.log("vue实例销毁前")
       

        },
        destroyed() {//vue实例的销毁后
               // 跳转其他页面了 触发销毁后
          // 应用场景：给其他页面传参，
          // 关闭定时器， 销毁一些全局事件如scroll resize
           console.log("vue实例销毁后")
        },



     })

    //   销毁上面的vue实例
    function toDel(){
      vm.$destroy() // vue实例的销毁方法 
    }
   </script>
</body>
</html>